<template>
  <div class="app-container home">
    <el-form :model="queryParams" ref="queryRef" :inline="true"  label-width="80px">
      <el-form-item label="日期" prop="itemType">
        <el-date-picker
            v-model="queryParams.time"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
            size="small"
        />
      </el-form-item>
      <el-form-item label="统计维度" prop="countType">
        <el-radio-group v-model="queryParams.countType" size="small">
          <el-radio-button label="销售额" value="销售额" />
          <el-radio-button label="销量" value="销量"  />
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <saleByDayComponents :queryParams="queryParams"/>
        <hr/>
      </el-col>
    </el-row>
    <el-form :model="queryParams" ref="queryRef" :inline="true"  label-width="80px">
      <el-form-item label="产品类型" prop="itemType">
        <el-tree-select
            v-model="queryParams.itemType"
            :data="typeOptions"
            :props="{ value: 'itemTypeId', label: 'typeName', children: 'children' }"
            value-key="itemTypeId"
            placeholder="请选择产品类型"
            check-strictly
        />
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <saleByItemTypeComponents :queryParams="queryParams"/>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <saleBySalesmanComponents :queryParams="queryParams"/>
      </el-col>
    </el-row>
    <el-divider/>
  </div>
</template>

<script setup name="Index">
import saleByDayComponents from '@/views/system/index/saleByDay.vue'
import saleByItemTypeComponents from '@/views/system/index/saleByItemType.vue'
import saleBySalesmanComponents from '@/views/system/index/saleBySalesman.vue'
import {listType} from "@/api/system/itemType.js";
const typeOptions = ref(undefined);
const { proxy } = getCurrentInstance();
const version = ref('3.8.7')

const data = reactive({
  form: {},
  queryParams: {
    time: [],
    itemType: null,
    countType: '销售额'
  },
  rules: {}
});
const { queryParams} = toRefs(data);

//添加日期的默认值
queryParams.value.time = [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30),new Date()]
/** 查询产品类型下拉树结构 */
function getTreeselect() {
  listType().then(response => {
    queryParams.value.itemType = response.data[0].itemTypeId;
    typeOptions.value= [];
    typeOptions.value = proxy.handleTree(response.data, "itemTypeId", "parentId");
  });
}


const shortcuts = [
  {
    text: '前一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '前一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '前三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
getTreeselect();

</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

